<template>
	<view class="content">
		<u-toast ref="uToast"></u-toast>
		<view class="logo"></view>
		<view class="xuanze-box" v-if="loginShow">
			<view class="juese"></view>
			<view class="xuanshou-btn" @click="teamChoose('xuanshou')"></view>
			<view class="guanzhong-btn" @click="teamChoose('guanzhong')"></view>
		</view>
		<view class="login-show" v-else>
			<view class="denglu"></view>
			<view class="denglu-box" v-if="isUser">
				<view class="xingming-box">
					<input type="text" v-model="form.name" placeholder="请填写姓名" class="xingming-inp" />
				</view>
				<!-- <view class="tel-box">

					<picker class="xingming-inp" mode="selector" range-key="name" :range="areaList" :value="area"
						@change="areaChange">
						<text class="xuanzedaqutips">{{form.area?form.area:'请选择大区'}}</text>
					</picker>
				</view> -->
			</view>
			<view class="denglu-box" v-else>
				<view class="xingming-box">
					<input type="text" v-model="form.guanzhongname" placeholder="请填写姓名" class="xingming-inp" />
				</view>
				<view class="tel-box">
					<input type="digit" v-model="form.guanzhongtel" placeholder="请输入手机号" class="xingming-inp" />
				</view>
			</view>
			<view class="btn-team">
				<view class="tijiao-btn" @click="login"></view>
				<view class="fanhui-btn" @click="fanhui"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				loginShow: true,
				isUser: true,
				form: {
					name: '',
					area: '',
					guanzhongname: '',
					guanzhongtel: ''
				},
				areaList: [],
				areaSelect: '',
				area: '',
				index: 0
			}
		},
		onShow() {
			this.getAreaList()
		},
		methods: {
			getAreaList() {
				uniCloud.callFunction({
					name: 'get-area-list'
				}).then(res => {
					console.log(res)
					this.areaList = res.result.data
				})
			},
			areaChange(e) {
				console.log(e)
				this.form.area = this.areaList[e.detail.value].name
			},
			fanhui() {
				this.loginShow = true
			},
			login() {
				console.log('this.form', this.form)
				if (this.isUser) {
					console.log(uni.$u.test.isEmpty(this.form.name))
					// console.log(uni.$u.test.isEmpty(this.form.area))
					if (!uni.$u.test.isEmpty(this.form.name)) {
						console.log('验证通过')
						this.loginSubmit(this.form)
					} else {
						console.log('验证不通过')
						this.$refs.uToast.show({
							message: '姓名不能为空',
							type: 'error',
						})
					}
				} else {
					if (uni.$u.test.isEmpty(this.form.guanzhongname)) {
						this.$refs.uToast.show({
							message: '姓名不能为空',
							type: 'error',
						})
						return
					} else if (!uni.$u.test.mobile(this.form.guanzhongtel)) {
						this.$refs.uToast.show({
							message: '请输入正确手机号',
							type: 'error',
						})
						return
					} else {
						this.loginSubmit(this.form)
						console.log('ok')
					}
				}
			},
			teamChoose(flag) {
				this.loginShow = false
				if (flag == 'xuanshou') {
					this.isUser = true
				} else {
					this.isUser = false
				}
			},
			loginSubmit(item) {
				uniCloud.callFunction({
					name: 'login1',
					data: Object.assign(item, {
						isUser: this.isUser
					})
				}).then(res => {
					console.log('登录后', res)
					if (res.result.status == 1) {
						//判断是否完成答题 没完成初始化 完成了跳转得分

						/* if (!uni.getStorageSync('TIKU')) {
							uni.setStorageSync('TIKU', res.result.timuarr)
							uni.setStorageSync('TINUM', 1)
							uni.setStorageSync('JISHIQI', 0)
							uni.setStorageSync('ZONGFEN', 0)
						}
						uni.setStorageSync('USER', res.result.data) */

						uni.setStorageSync('TIKU', res.result.timuarr)
						uni.setStorageSync('TINUM', res.result.data.tiNum)
						uni.setStorageSync('JISHIQI', res.result.data.shijian)
						uni.setStorageSync('ZONGFEN', res.result.data.zongfen)
						uni.setStorageSync('USER', res.result.data)




						this.$refs.uToast.show({
							message: res.result.msg,
							type: 'success',
							duration: 800,
							complete: () => {
								console.log('登陆成功')
								uni.navigateTo({
									url: '../timu/timu'
								})
							}
						})
					} else {
						this.$refs.uToast.show({
							message: res.result.msg,
							type: 'error',
							complete: () => {
								console.log('登陆失败')
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: url('@/static/bg.png') no-repeat center top;
		background-size: 100% 100%;
		// height: 1624rpx;
		background-attachment: fixed;
	}

	.btn-team {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 84rpx;
	}

	.tijiao-btn {
		width: 220rpx;
		height: 82rpx;
		background: url('@/static/tijiao-btn.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 30rpx;
	}

	.fanhui-btn {
		width: 220rpx;
		height: 80rpx;
		background: url('@/static/fanhui-btn.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 30rpx;
	}

	.denglu {
		width: 292rpx;
		height: 108rpx;
		background: url('@/static/denglu.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 128rpx;
	}

	.login-show {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.denglu-box {
		margin-top: 74rpx;
		width: 564rpx;
		height: 538rpx;
		background: #e9e9e9;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.xuanshou-btn {
		width: 100rpx;
		height: 100rpx;
		background: #550000;
	}

	.guanzhong-btn {
		width: 100rpx;
		height: 100rpx;
		background: #55aa00;
	}

	.juese {
		width: 440rpx;
		height: 108rpx;
		background: url('@/static/juese.png') no-repeat center top;
		background-size: 100% 100%;
		margin-top: 130rpx;
	}

	.xuanshou-btn {
		width: 286rpx;
		height: 278rpx;
		background: url('@/static/xuanshou-btn.png') no-repeat center top;
		background-size: 100% 100%;
		margin-top: 80rpx;
	}

	.guanzhong-btn {
		width: 286rpx;
		height: 276rpx;
		background: url('@/static/guanzhong-btn.png') no-repeat center top;
		background-size: 100% 100%;
		// margin-top: 80rpx;
	}

	.xuanze-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.xingming-box {
		width: 486rpx;
		height: 84rpx;
		background: url('@/static/name.png') no-repeat center top;
		background-size: 100% 100%;
		margin-top: 104rpx;
		display: flex;
		align-items: center;
	}

	.tel-box {
		width: 486rpx;
		height: 84rpx;
		background: url('@/static/tel.png') no-repeat center top;
		background-size: 100% 100%;
		margin-top: 84rpx;
		display: flex;
		align-items: center;
	}

	.xingming-inp {
		width: 274rpx;
		height: 66rpx;
		// border: 1px solid #550000;
		margin-left: 178rpx;
		font-size: 14px;
		color: #8c8c8c;
	}

	.xuanzedaqutips {
		line-height: 66rpx;
	}
</style>
